<script lang="ts" setup>
import {
  getOneByCondition,
  getReadonly,
  insertOne,
  reSetDialogModel,
  updateOne,
  urls
} from '@/index';

import type { DialogModel, InfrastructureRelation } from '@/index.d';
import type { FormInstance, FormRules } from 'element-plus';

const dialogModel = defineModel<DialogModel<InfrastructureRelation>>('dialogModel', {
  required: true
});

const { insertForbidden, updateForbidden } = getReadonly(dialogModel.value);

const formData = reactive<InfrastructureRelation>({
  id: 0,
  name: ''
});

const setFormData = async (res: InfrastructureRelation) => {
  formData.id = res.id;
  formData.creator = res.creator;
  formData.createTime = res.createTime;
  formData.updater = res.updater;
  formData.updateTime = res.updateTime;
  formData.name = res.name;
  formData.addressProvince = res.addressProvince;
  formData.addressDetail = res.addressDetail;
  formData.linkPerson = res.linkPerson;
  formData.linkPhone = res.linkPhone;
  formData.linkEmail = res.linkEmail;
  formData.openBank = res.openBank;
  formData.bankAccount = res.bankAccount;
  formData.taxNumber = res.taxNumber;
  formData.businessLicenseAttachmentUuid = res.businessLicenseAttachmentUuid;
  formData.businessLicenseAttachmentUrl = res.businessLicenseAttachmentUrl;
  formData.otherAttachmentsUuid = res.otherAttachmentsUuid;
};

const reSetFormData = () => {
  reSetDialogModel(dialogModel);
  formData.id = 0;
};

watch(
  () => dialogModel.value.visible,
  value => {
    value && (formData.id = dialogModel.value.id as number);
    !value && reSetFormData();
  },
  {
    immediate: true
  }
);

watch(
  () => formData.id,
  async (value: number | undefined) => {
    if (value) {
      const res = await getOneByCondition<InfrastructureRelation>(
        urls.infrastructureRelation,
        'id',
        value
      );
      res && setFormData(res);
    }
  },
  {
    immediate: true
  }
);

const formDataRef = ref<FormInstance>();

interface FormDataRules {}

const formDataRules = computed(() => {
  switch (dialogModel.value.type) {
    case 'view':
      return reactive({});

    case 'update':
      return reactive<FormRules<FormDataRules>>({
        name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
        openBank: [{ required: true, message: '开户银行不能为空', trigger: 'blur' }],
        bankAccount: [{ required: true, message: '银行账号不能为空', trigger: 'blur' }],
        taxNumber: [{ required: true, message: '税务登记号不能为空', trigger: 'blur' }],
        linkEmail: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }]
      });

    case 'insert':
      return reactive<FormRules<FormDataRules>>({
        name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
        openBank: [{ required: true, message: '开户银行不能为空', trigger: 'blur' }],
        bankAccount: [{ required: true, message: '银行账号不能为空', trigger: 'blur' }],
        taxNumber: [{ required: true, message: '税务登记号不能为空', trigger: 'blur' }],
        linkEmail: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }]
      });
  }
});

const saveFormData = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl
    .validate()
    .then(async valid => {
      if (valid) {
        if (dialogModel.value.id === 0) {
          const res = (await insertOne<InfrastructureRelation>(
            urls.infrastructureRelation,
            formData
          )) as InfrastructureRelation;
          if (res) {
            setFormData(res);
            dialogModel.value.id = res.id as number;
            dialogModel.value.type = 'update';
            dialogModel.value.change = true;
          }
        } else {
          const tempFormData: InfrastructureRelation = {
            id: formData.id,
            name: formData.name,
            addressProvince: formData.addressProvince,
            addressDetail: formData.addressDetail,
            linkPerson: formData.linkPerson,
            linkPhone: formData.linkPhone,
            linkEmail: formData.linkEmail,
            openBank: formData.openBank,
            bankAccount: formData.bankAccount,
            taxNumber: formData.taxNumber
          };

          const res = (await updateOne<InfrastructureRelation>(
            urls.infrastructureRelation,
            tempFormData
          )) as InfrastructureRelation;

          if (res) {
            dialogModel.value.change = true;
            formData.updater = res.updater;
            formData.updateTime = res.updateTime;
          }
        }
      }
    })
    .catch(res => console.log(res));
};
</script>
<template>
  <HqDialogDetail
    :dialog-model="dialogModel"
    @submit="saveFormData(formDataRef)"
    operate-record
    :operation="formData"
  >
    <template #default>
      <el-card shadow="hover">
        <template #header>基本信息</template>
        <template #default>
          <hq-form :model="formData" ref="formDataRef" :rules="formDataRules">
            <el-row :gutter="5">
              <hq-col v-show="false">
                <el-form-item label="id" prop="id">
                  <el-input v-model="formData.id" readonly />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="名称" prop="name">
                  <el-input v-model="formData.name" :disabled="updateForbidden" />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="所在省" prop="addressProvince">
                  <el-select v-model="formData.addressProvince" :disabled="updateForbidden">
                    <HqProvinceOptions />
                  </el-select>
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="详细地址" prop="addressDetail">
                  <el-input v-model="formData.addressDetail" :disabled="updateForbidden" />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="联系人" prop="linkPerson">
                  <el-input v-model="formData.linkPerson" :disabled="updateForbidden" />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="联系电话" prop="linkPhone">
                  <el-input v-model="formData.linkPhone" :disabled="updateForbidden" />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="电子邮箱" prop="linkEmail">
                  <el-input v-model="formData.linkEmail" :disabled="updateForbidden" />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="开户银行" prop="openBank">
                  <el-input v-model="formData.openBank" :disabled="updateForbidden" />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="银行账号" prop="bankAccount">
                  <el-input v-model="formData.bankAccount" :disabled="updateForbidden" />
                </el-form-item>
              </hq-col>
              <hq-col>
                <el-form-item label="税务登记号" prop="taxNumber">
                  <el-input v-model="formData.taxNumber" :disabled="updateForbidden" />
                </el-form-item>
              </hq-col>
            </el-row>
          </hq-form>
        </template>
      </el-card>
      <el-card shadow="hover" v-if="formData.businessLicenseAttachmentUuid">
        <template #header>营业执照</template>
        <template #default>
          <HqUploadOne
            :key-word="formData.businessLicenseAttachmentUuid"
            :disabled="dialogModel.type !== 'update'"
          />
        </template>
      </el-card>
      <el-card shadow="hover" v-if="formData.businessLicenseAttachmentUuid">
        <template #header>其它附件</template>
        <template #default>
          <HqUploadMany
            :key-word="formData.otherAttachmentsUuid as string"
            :disabled="dialogModel.type !== 'update'"
          />
        </template>
      </el-card>
    </template>
  </HqDialogDetail>
</template>
<style lang="scss" scoped></style>
